
<template>
<div class="wrap">
    <h3>v-show</h3>
    <div class="titel" v-show="show">我是title</div>
    <button @click="changeShow"> show</button>
</div>

<div class="wrap">
    <h3>v-if</h3>
    <div class="titel" v-if="ifshow">我是title2</div>
    <button @click="ifshow=!ifshow"> show</button>
</div>

<div class="wrap">
    <h3>v-model</h3>
    <input type="text" name="number" id="number" v-model="num">
    {{num}}
    <button @click="add=num++">+1</button>
</div>

</template>






<script lang='ts' setup>
import { Ref, ref } from "vue";
// 1 vue3中v-if v-show与vue2中的区别
const show: Ref<boolean> = ref(true);
let ifshow = ref<boolean>(true);
let changeShow = function() {
    console.log('click-show');
    show.value = !show.value;
};
// 2 双向数据绑定的实现v-model
let num = ref<number>(0);

</script>




<style lang="less" scoped>
@import '../../src/assets/styl/common/index.less';
.wrap {
    .rem4141(width, 120);
    border: @border;
    .rem4141(height, 150);
    .rem4141(margin-left, 20);
    float: left;
    .titel {
        background-color: extract(@bgcolors, 2);
        .rem4141(width, 100);
        .rem4141(height, 100);
        .rem4141(font-size, 24);
        color: extract(@fontcolors, 1);
    }
}
</style>